<template>
  <div class="container">
    <el-dialog
      :visible="dialogVisible"
      @close="closeDialog"
      title="题目详情"
      width="900px"
      margin-top="15px"

    >
      <el-form :model="titleDetails" ref="form">
        <el-row type="flex" justify="space-between" style="margin-bottom: 10px">
          <el-col :span="6">
            <span
              >【题型】：{{
                changeQuestionType(titleDetails.questionType)
              }}</span
            >
          </el-col>
          <el-col :span="6"> 【编号】：{{ titleDetails.id }} </el-col>
          <el-col :span="6">
            <span v-if="titleDetails.difficulty === '1'">【难度】: 简单</span>
            <span v-else-if="titleDetails.questionType === '2'"
              >【题型】: 一般</span
            >
            <span v-else>【难度】: 困难</span></el-col
          >
          <el-col :span="6"> 【标签】：{{ titleDetails.tags }} </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6"> 【学科】：{{ titleDetails.subjectName }} </el-col>
          <el-col :span="6">【目录】：{{ titleDetails.directoryName }}</el-col>
          <el-col :span="6"> 【方向】：{{ titleDetails.direction }} </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-divider></el-divider>

        <!-- 题目选项 -->
        <el-row>
          <el-col :span="6">【题干】：</el-col>
        </el-row>
        <el-row>
          <el-col style="margin-top: 0px">
            <div style="color:blue;" v-html="titleDetails.question"></div>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <span v-if="titleDetails.questionType === '1'"
              >单选题 选项：（以下选中的选项为正确答案）</span
            >
            <span v-else-if="titleDetails.questionType === '2'"
              >多选题 选项：（以下选中的选项为正确答案）</span
            >
            <span v-else></span>
          </el-col>
        </el-row>

        <el-row>
          <el-col v-if="titleDetails.questionType === '1'">
            <div v-for="item in titleDetails.options" :key="item.id">
              <el-radio
                v-model="isRight"
                :label="item.isRight"
                class="radios"
                >{{ item.title }}</el-radio
              >
            </div>
          </el-col>
          <el-col v-if="titleDetails.questionType === '2'">
            <div>
              <el-checkbox-group
                v-model="isRightArr"
                v-for="item in titleDetails.options"
                :key="item.id"
              >
                <el-checkbox :label="item.code" >{{
                  item.title
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <!-- 参考答案 -->
        <el-row>
          <el-col
            >【参考答案】：<el-button type="danger" @click="showVedio"
              >视频答案预览</el-button
            ></el-col
          >
          <el-col v-if="isShowVideo"
            ><video
              class="srcs"
              src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4"
              controls
              style="width:400px;heigth:300px;margin-top:20px"
            ></video
          ></el-col>
        </el-row>
        <el-divider></el-divider>

        <!-- 答案解析 -->
        <el-row type="flex" align="middle">
          【答案解析】：
          <span v-html="titleDetails.answer"></span>
        </el-row>
        <el-divider></el-divider>

        <!-- 题目备注 -->
        <el-row>
          <el-col type="flex" justify="start"
            >【题目备注】：{{ titleDetails.remarks }}</el-col
          >
        </el-row>

        <!-- 关闭按钮 -->
        <el-row style="margin-top: 30px" type="flex" justify="end">
          <el-col :span="2">
            <el-button type="primary" @click="closeDialog">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsRandomsPreview',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      titleDetails: {},
      isRight: 1, // 单选框验证数据
      isShowVideo: false,
      isRightArr: [] // 多选框验证数据
    }
  },
  methods: {
    async getSelectDetail (value) {
      const { data } = await detail(value)
      // console.log(data)
      this.titleDetails = data
      // 选项重新排序
      data.options.sort(function (a, b) {
        const num1 = a.code.charCodeAt()
        const num2 = b.code.charCodeAt()
        return (num1 - num2)
      })
      const arr = data.options
        .filter(item => item.isRight === 1)
        .map(item => item.code)
      console.log(arr)
      this.isRightArr = arr
      return arr
    },
    // 关闭详情弹层
    closeDialog () {
      this.$emit('close-dialog')
      this.isShowVideo = false
    },
    // 更改题型格式
    changeQuestionType (type) {
      const MAP = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return MAP[type]
    },
    // 显示视频
    showVedio () {
      this.isShowVideo = true
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-col p {
  font-size: 14px;
}
.el-dialog__body {
  padding: 40px 20px;
}
.el-radio {
  padding: 8px 0;
  // 阻止用户点击
  pointer-events: none;
}
.el-checkbox{
   pointer-events: none;
}
.el-divider--horizontal {
  margin: 12px 0;
  height: 2px;
  border: 1px solid rgb(162, 156, 156);
  border-bottom: 0px;
}
</style>
